<template>
    <view class="session-list-item-head-super-style">
        <img class="session-list-item-head-style" :src="headUrl" />
        <text v-if="unread && unread > 0" class="unread-style">{{unread <=99 ? unread:'99+'}}</text>
    </view>
</template>

<script lang="ts">
import { onMounted, onUnmounted } from 'vue';
    export default {
        // 会话列表项头部
        name: 'session-list-item-head',
        props: {
            // 头像
            headUrl: {
                type: String,
                required: true  
            },
            // 未读消息数量
            unread: {
                type: Number,
                required: true
            }
        },
        setup() {
            onMounted(() => {
                console.log(' session-list-item-head onMounted');
            })
            onUnmounted(() => {
                console.log(' session-list-item-head onUnmounted');
            })
        }
    }
    
</script>

<style scoped>
.unread-style{
    min-width:30px;
    max-width:40px;
    max-height: 32px;
    min-height: 32px;
    text-align: center;
    border-radius: 50%;
    background-color: #f64e30;
    color: white;
    font-size: 22px;
    line-height: 27px;
    position: absolute;
    top: -3px;
    right: -3px;
}
.session-list-item-head-style{
    width: 88px;
    height: 88px;
    border-radius: 50%;
}
.session-list-item-head-super-style{
    width: auto;
    display: flex;
    margin:31px 34px 31px 34px;
    position: relative;
}
</style>
